<div class="flex-vertical absolute-fill content-margin traffic-watch">
    <div class="flex-horizontal flex-wrap nospacing flex-shrink-0">
        <div class="flex-horizontal flex-wrap margin-bottom margin-sm">
            <div>
                <button class="btn btn-primary" data-bind="click: pause, visible: liveClient">
                    <i class="icon-pause"></i> <span>Pause</span>
                </button>
                <button class="btn btn-primary" data-bind="click: resume, visible: !liveClient()">
                    <i class="icon-play"></i> <span>Resume</span>
                </button>
                <button class="btn btn-default" data-bind="click: exportToFile">
                    <i class="icon-export"></i><span>Export</span>
                </button>
            </div>
            <div class="btn-group-label" data-label="HTTP">
                <div class="btn-group">
                    <select id="visibleTypesSelectorHttp" multiple="multiple"
                            data-bind="options: filteredTypeDataHttp, selectedOptions: selectedTypeNamesHttp, optionsText: 'propertyName', optionsValue: 'propertyName'"></select>
                </div>
            </div>
            <div class="btn-group-label" data-label="TCP">
                <div class="btn-group">
                    <select id="visibleTypesSelectorTcp" multiple="multiple"
                            data-bind="options: filteredTypeDataTcp, selectedOptions: selectedTypeNamesTcp, optionsText: 'propertyName', optionsValue: 'propertyName'"></select>
                </div>
            </div>
            <div id="trafficFilter">
                <input class="form-control" placeholder="Filter" data-bind="textInput: filter">
            </div>
            <div class="checkbox">
                <input class="styled" id="onlyErrors" type="checkbox" data-bind="checked: onlyErrors">
                <label for="onlyErrors">Show errors only</label>
            </div>
        </div>
        <div class="flex-grow"></div>
        <div>
            <i class="icon-info"></i>
            <small>To set the Traffic Watch logging go to <a data-bind="attr: { href: adminLogsUrl }">Admin Logs View</a></small>
        </div>
    </div>
    <div class="flex-horizontal">
        <div class="flex-separator"></div>
        <div class="btn-group">
            <div class="btn-group btn-group-sm" role="group">
                <div class="dropdown pull-right">
                    <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        <i class="icon-stats"></i><span>Stats</span>
                        <span class="caret"></span>
                    </button>
                    <div class="dropdown-menu stats-menu" data-bind="dropdownPanel: true, template: { name: 'stats-template' }">
                    </div>
                </div>
            </div>
            <button class="btn btn-sm btn-info btn-checkable" data-bind="click: toggleTail, css: { active: tailEnabled }">
                <i class="icon-logs"></i><span>Monitoring (tail -f)</span>
            </button>
            <button class="btn btn-sm btn-danger" data-bind="click: clear">
                <i class="icon-cancel"></i><span>Clear</span>
            </button>
        </div>
    </div>
    <div class="flex-grow">
        <virtual-grid class="resizable" params="controller: gridController, emptyTemplate: 'empty-traffic-watch-template'"></virtual-grid>
    </div>

    <div class="help-block bg-warning text-warning" data-bind="visible: !isConnectedToWebSocket()">
        <span data-bind="visible: isPauseLogs"><i class="icon-warning"></i><span>Traffic Watch log is paused</span></span>
        <span data-bind="visible: !isPauseLogs()"><i class="btn-spinner"></i><span class="margin-left">Trying to Connect</span></span>
    </div>
    <div class="has-error" data-bind="visible: isBufferFull">
        <div class="help-block">
            <i class="icon-danger"></i><span> The log buffer is full. <a href="#" data-bind="click: clear">Clear all entries.</a></span>
        </div>
    </div>

</div>

<script type="text/html" id="empty-traffic-watch-template">
    No entries for now.
</script>

<script type="text/html" id="stats-template">
    <div class="panel margin-left margin-left-sm margin-right margin-right-sm">
        <div class="padding padding-lg margin-top margin-top-sm">
            <div class="row margin-top">
                <div class="properties-container stats-container flex-horizontal padding padding-sm" data-label="General">
                    <div class="property">
                        <h5><i class="icon-client"></i><span>Source IPs</span></h5>
                        <strong data-bind="text: stats.sourceIpsCount" class="stats-property"></strong>
                    </div>
                    <div class="property" data-toggle="tooltip" title="Number of HTTP requests <br> (including web sockets)" data-placement="top">
                        <h5><i class="icon-running-tasks"></i><span>Http Requests</span></h5>
                        <strong data-bind="text: stats.httpRequestCount" class="stats-property"></strong>
                    </div>
                    <div class="property">
                        <h5><i class="icon-running-tasks"></i><span>TCP operations</span></h5>
                        <strong data-bind="text: stats.tcpOperationCount" class="stats-property"></strong>
                    </div>
                </div>
            </div>
            <div class="row margin-top">
                <div class="properties-container stats-container flex-horizontal padding padding-sm" data-label="Request Duration (HTTP)"
                     data-toggle="tooltip" title="Requests duration percentiles <br> (excluding web sockets - calculated based on last 2048 items)" data-placement="top">
                    <div class="property right-border">
                        <h5><i class="icon-average"></i><span>Average</span></h5>
                        <strong data-bind="text: stats.requestDuration().avg" class="stats-property"></strong>
                    </div>
                    <div class="property">
                        <h5><i class="icon-arrow-filled-down"></i><span>Minimum</span></h5>
                        <strong data-bind="text: stats.requestDuration().min" class="stats-property"></strong>
                    </div>
                    <div class="property">
                        <h5>90%</h5>
                        <strong data-bind="text: stats.requestDuration().percentile_90"></strong>
                    </div>
                    <div class="property">
                        <h5>99%</h5>
                        <strong data-bind="text: stats.requestDuration().percentile_99"></strong>
                    </div>
                    <div class="property">
                        <h5>99.9%</h5>
                        <strong data-bind="text: stats.requestDuration().percentile_99_9"></strong>
                    </div>
                    <div class="property">
                        <h5><i class="icon-arrow-filled-up"></i><span>Maximum</span></h5>
                        <strong data-bind="text: stats.requestDuration().max" class="stats-property"></strong>
                    </div>
                </div>
            </div>

            <div class="row margin-top">
                <div class="properties-container stats-container flex-horizontal padding padding-sm" data-label="Response size (HTTP)"
                     data-toggle="tooltip" title="Response size percentiles <br> (excluding web sockets - calculated based on last 2048 items)" data-placement="top">
                    <div class="property right-border">
                        <h5><i class="icon-average"></i><span>Average</span></h5>
                        <strong data-bind="text: stats.responseSize().avg" class="stats-property"></strong>
                    </div>
                    <div class="property">
                        <h5><i class="icon-arrow-filled-down"></i><span>Minimum</span></h5>
                        <strong data-bind="text: stats.responseSize().min" class="stats-property"></strong>
                    </div>
                    <div class="property">
                        <h5>90%</h5>
                        <strong data-bind="text: stats.responseSize().percentile_90"></strong>
                    </div>
                    <div class="property">
                        <h5>99%</h5>
                        <strong data-bind="text: stats.responseSize().percentile_99"></strong>
                    </div>
                    <div class="property">
                        <h5>99.9%</h5>
                        <strong data-bind="text: stats.responseSize().percentile_99_9"></strong>
                    </div>
                    <div class="property">
                        <h5><i class="icon-arrow-filled-up"></i><span>Maximum</span></h5>
                        <strong data-bind="text: stats.responseSize().max"></strong>
                    </div>
                </div>
            </div>
            
            <div class="row" data-bind="visible: isDataFiltered">
                <div class="properties-container pull-right">
                    <small class="text-warning bg-warning padding padding-xs">
                        <i class="icon-warning"></i><span>Showing stats on filtered data</span>
                    </small>
                </div>
            </div>
        </div>
    </div>
</script>

<div class="tooltip json-preview lg js-traffic-watch-tooltip" style="opacity: 0">
</div>
